<template>
  <div v-if="previewImg.popup" class="rlPopup" @mousewheel.prevent="handleWheel">
    <div class="close-big-img" @click="close()">
      <!-- <em class="font_family icon-close-circle"></em> -->
      <a-icon type="close" style="color: #e0e0e0; font-size: 24px; line-height: 42px; text-align: center; cursor: pointer;" />
    </div>
    <div class="prev handle-btn" v-if="!isSingle" @click="prev()">
      <!-- <em class="font_family icon-left-line"></em> -->
      <a-icon type="left" style="color: #e0e0e0; font-size: 24px; cursor: pointer; line-height: 47px;" />
    </div>
    <div class="next handle-btn" v-if="!isSingle" @click="next()">
      <!-- <em class="font_family icon-right--line"></em> -->
      <a-icon type="right" style="color: #e0e0e0; font-size: 24px; cursor: pointer; line-height: 47px;" />
    </div>
    <!--放大缩小旋转-->
    <div class="zoom-wrap">
      <a-icon type="zoom-out" @click="handleActions('zoomOut')"/>
      <!-- <i  class="el-icon-zoom-in"></i> -->
      <a-icon type="zoom-in" @click="handleActions('zoomIn')"/>
      <!-- <i  class="el-icon-refresh-left"></i> -->
      <a-icon type="redo" @click="handleActions('left')" />
      <a-icon type="undo" @click="handleActions('right')"/>
      <!-- <i  class="el-icon-refresh-right"></i> -->
    </div>
    <div class="img-list-wrap" style="user-select: none">
      <div v-for="(img, i) in previewImg.imgList" :key="img">
        <img
          ref="img"
          :src="img"
          v-if="i === previewImg.index"
          :style="imgStyle"
          alt="">
      </div>
    </div>
  </div>
</template>

  <script>
  export default {
    name: 'JProview',
    props: {
      previewImg: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        transform: {
          scale: 1,
          degree: 0
        }
      }
    },
    computed: {
      isSingle() {
        return this.previewImg.imgList.length <= 1
      },
      isFirst() {
        return this.previewImg.index === 0
      },
      isLast() {
        return this.previewImg.index === this.previewImg.imgList.length - 1
      },
      imgStyle() {
        const { scale, degree } = this.transform
        const style = {
          transform: `scale(${scale}) rotate(${degree}deg)`
        }
        return style
      }
    },
		watch: {
			previewImg: {
				handler (val) {
					if (!val.popup) {
						this.transform = {
							scale: 1,
							degree: 0
						}
					}
				},
				immediate: true,
				deep: true
			}
		},
    methods: {
      prev() {
        if (this.isFirst && !this.previewImg.infinite) return
        if (this.$parent.previewImg.index > 0) {
          const len = this.previewImg.imgList.length
          this.$parent.previewImg.index = (this.$parent.previewImg.index - 1 + len) % len
          this.reset()
        }
      },
      next() {
        if (this.isLast && !this.previewImg.infinite) return
        if (this.previewImg.imgList.length > this.$parent.previewImg.index) {
          const len = this.previewImg.imgList.length
          this.$parent.previewImg.index = (this.$parent.previewImg.index + 1) % len
          this.reset()
        }
      },
      handleActions(action) {
        const { zoomRate, rotateDeg, enableTransition } = {
          zoomRate: 0.2,
          rotateDeg: 90,
          enableTransition: true
        }
        const { transform } = this
        switch (action) {
          case 'zoomOut':
            if (transform.scale > 0.2) {
              transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3))
            }
            break
          case 'zoomIn':
            transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3))
            break
          case 'left':
            transform.degree -= rotateDeg
            break
          case 'right':
            transform.degree += rotateDeg
            break
        }
        transform.enableTransition = enableTransition
      },
      reset() {
        this.transform = {
          scale: 1,
          degree: 0
        }
      },
      close() {
        this.$parent.previewImg.popup = false
      },

			throttle (fn, gapTime) {
				let _this = this
				return function () {
					let _nowTime = +new Date()
					if (_nowTime - _this._lastTime > gapTime || !_this._lastTime) {
						fn(...arguments)// 函数可以带参数
						_this._lastTime = _nowTime
					}
				}
			},
    	handleWheel (e) {
        e.stopPropagation()
        this.throttle(this.pageUpOrDown, 20)(e);
			},
			pageUpOrDown (e) {
				if (e.deltaY > 0) {
					// 向下
					this.handleActions('zoomOut')
				} else if (e.deltaY < 0) {
					// 向上
					this.handleActions('zoomIn')
				}
			}
    }
  }
  </script>

  <style lang="less" scoped>
    // 查看大图
    .rlPopup {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 9999999999;
      .close-big-img {
        position: absolute;
        top: 40px;
        right: 40px;
        z-index: 99999999999;
        width: 40px;
        height: 40px;
        background-color: #66676b;
        border-radius: 50%;
        text-align: center;
      }

      .handle-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        line-height: 38px;
        font-size: 24px;
        color: #fff;
        background-color: #66676b;
        border-color: #fff;
        border-radius: 50%;
        cursor: pointer;
        text-align: center;
        z-index: 99999999999;
      }

      .prev {
        left: 40px;
      }

      .next {
        right: 40px;
      }

      .img-list-wrap {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          display: block;
          object-fit: scale-down;
          transition: all 0.3s;
          width: 480px;
          height: 320px;
        }
      }

      .zoom-wrap {
        position: absolute;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #606266;
        border-radius: 22px;
        z-index: 99999999999;
        width: 222px;
        height: 44px;
        line-height: 47px;
        padding: 0 23px;

        i {
          color: #e0e0e0;
          cursor: pointer;
          font-size: 22px;
          margin-right: 25px;

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  </style>
